<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { getCashierListApi } from '@/api/table'
import { unref } from 'vue'
import { ElButton } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'

const { tableRegister, tableState } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getCashierListApi({
      pageIndex: unref(currentPage),
      pageSize: unref(pageSize)
    })
    return {
      list: res.data.list,
      total: res.data.total
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { t } = useI18n()

const columns: TableColumn[] = [
  {
    field: 'bill_date',
    label: t('tableDemo.bill_date')
  },
  {
    field: 'source',
    label: t('tableDemo.source')
  },
  {
    field: 'category',
    label: t('tableDemo.category'),
    sortable: true
  },
  {
    field: 'house',
    label: t('tableDemo.house')
  },
  {
    field: 'project',
    label: t('tableDemo.project')
  },
  {
    field: 'payees',
    label: t('tableDemo.payees')
  },
  {
    field: 'payee',
    label: t('tableDemo.payee')
  },
  {
    field: 'account',
    label: t('tableDemo.account')
  },
  {
    field: 'amount',
    label: t('tableDemo.amount')
  },
  {
    field: 'payment',
    label: t('tableDemo.payment')
  },
  {
    field: 'pay_date',
    label: t('tableDemo.pay_date')
  },
  {
    field: 'pay_way',
    label: t('tableDemo.pay_way')
  },
  {
    field: 'action',
    label: t('tableDemo.action'),
    slots: {
      default: (data) => {
        return (
          <ElButton type="primary" onClick={() => actionFn(data)}>
            {t('tableDemo.action')}
          </ElButton>
        )
      }
    }
  }
]

const actionFn = (data: any) => {
  console.log(data)
}
</script>

<template>
  <ContentWrap title="公司财务出纳明细">
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      :loading="loading"
      :defaultSort="{ prop: 'display_time', order: 'descending' }"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
